<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>歌曲管理</el-breadcrumb-item>
      <el-breadcrumb-item>类型列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片区域-->
    <el-card style="height: 600px">
      <el-row class="btn-row">
        <el-button type="primary" @click="dialogVisible = true">添加父类型</el-button>
      </el-row>
      <el-row>
        <el-tabs v-model="activeName" tab-position="left" closable @tab-remove="removeTab">
          <el-tab-pane v-for="(type1, index) in types" :label="type1.name" :name="type1.id" :key="index">
            <el-tag v-for="(type2,index) in type1.child" :key="index" effect="dark" closable @close="deleteType(type2.id)">
              {{type2.name}}
            </el-tag>
            <div class="changeBtn">
            <el-input id="inputtag" v-if="type1.vislate" v-model="type.name"
                      ref="saveTagInput" size="small" class="input-new-tag"
                      @blur="handleInputConfirm(type1)">
            </el-input>
            <el-button v-else size="small" @click="changeToInp(type1)">+ New Tag</el-button>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-row>
    </el-card>

    <el-dialog title="添加父类型" :visible.sync="dialogVisible" width="30%">
      <el-input v-model="type.name" placeholder="请输入内容"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addType">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      types: [],
      type: {
        name: '',
        parentId: 0
      },
      activeName: '1',
      dialogVisible: false
    }
  },
  methods: {
    removeTab (targetId) {
      this.types.find(item => {
        if (item.id === targetId) {
          if (item.child.length !== 0) return this.$message.warning('这个类型下面还有子类，你不能删除')
          else this.deleteType(targetId)
        }
      })
    },
    // 删除类型
    deleteType (id) {
      this.$http.delete(`type/${id}`).then(res => {
        this.hite(res.data.code)
        this.getType()
      })
    },
    // 添加类型
    addType () {
      this.$http.post('type', this.type).then(res => {
        this.hite(res.data.code)
        if (this.type.parentId === 0) {
          this.dialogVisible = false
        }
        this.type = { name: '', parentId: 0 }
        this.getType()
      })
    },
    handleInputConfirm (item) {
      if (this.type.name.trim() !== '') {
        this.type.parentId = item.id
        this.addType()
      }
      item.vislate = false
    },
    changeToInp: function (item) {
      item.vislate = true
      console.log(item.id + ':' + item.vislate)
      // this.$nextTick(function () {
      //   this.$refs.saveTagInput.$el.querySelector('input').focus()
      // })
      const inputname = document.getElementById('inputtag')
      inputname.focus()
      // this.$refs.saveTagInput.$el.querySelector('input').focus()
    },
    hite (code) {
      if (code === 10000) {
        this.$message.success({
          message: '成功',
          duration: 1000
        })
      } else {
        this.$message.error({
          message: '失败',
          duration: 1000
        })
      }
    },
    getType () {
      this.$http.get('type').then(res => {
        res.data.data.forEach(item => {
          item.vislate = false
        })
        this.types = res.data.data
      })
    }
  },
  created () {
    this.getType()
  }
}
</script>

<style scoped>
  .el-tab-pane {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .el-tag, .changeBtn {
    margin: 30px 250px 0 0;
    width: 100px;
  }
  .btn-row{
    display: flex;
    justify-content: flex-end;
  }
</style>
